import './index.less';
import { useEffect, useState } from 'react';
import { Button, Card, Form, Space, FormInstance, Input, message, Modal, Row, Table, Select } from 'antd';
import { ResponseData } from '@/utils/request';
import { createArticle, detailData,queryTwCardPage, removeData, updateData as updateDataService } from './service';
import { PaginationConfig, TableListItem, IResponseData } from './data.d';
import moment from 'moment'

import ForumInfoModel from './ForumInfo';

import { ColumnsType } from 'antd/lib/table';

const FORUMTYPE = {
  // 0上线;1下线;2审核中;3审核拒绝；4待付款；5已卖出
  0: '已完成',
  1: '待付款',
  2: '待发货',
  3: '待收货',
  4: '已取消',
  5: '已退款',
  6: '已完成'
} as {
        // 0已完成，已解冻;1待付款；2待发货；3待收货；4已取消；5已退款；6已完成，冻结中
  [key: number]: string
}
const SEXTYPE = {
  0: '未知',
  1: '男',
  2: '女'
} as {
  [key: number]: string
}
function App() {
  // 获取数据
  const [loading, setLoading] = useState<boolean>(false);
  const [list, setList] = useState<TableListItem[]>([]);
  const [form] = Form.useForm();
  const [pagination, setPagination] = useState<PaginationConfig>({
    page: 1,
    size: 10,
  });
  const [isOpen, setIsOpen] = useState<boolean>(false);
  const getList = async (params?: pagination): Promise<void> => {
    setLoading(true);
    const response: ResponseData<IResponseData> = await queryTwCardPage({
      ...pagination,
      ...params,
    });
    const data = response.data || { list: [], total: 0 };
    setList(data || []);
    setLoading(false);
  };
  useEffect(() => {
    getList();
  }, []);


  // 编辑弹框 data - 详情
  const [updateSubmitLoading, setUpdateSubmitLoading] = useState<boolean>(false);
  const [updateFormVisible, setUpdateFormVisible] = useState<boolean>(false);
  const [updateData, setUpdateData] = useState({});
  const [detailUpdateLoading, setDetailUpdateLoading] = useState<number[]>([]);
  const detailUpdateData = async (id: number) => {
    setDetailUpdateLoading([id]);

    const response: ResponseData<TableListItem> = await detailData(id);
    const { data } = response;
    setUpdateData({
      ...data,
    });
    setUpdateFormVisible(true);

    setDetailUpdateLoading([]);
  };

  const updataFormCancel = async () => {
    setUpdateData({});
    setUpdateFormVisible(false);
  };

  const onUpdate = (row) => {
    setIsOpen(true)
    setUpdateData(row)
  }

  const updateSubmit = async (values: TableListItem) => {
    setUpdateSubmitLoading(true);

    const { id, ...params } = values;
    await updateDataService(id, { ...params });
    updataFormCancel();
    message.success('编辑成功！');
    getList({current: pagination.current});

    setUpdateSubmitLoading(false);
  };

  const columns: ColumnsType<TableListItem> = [
    {
      title: '序号',
      dataIndex: 'index',
      width: 60,
      render: (_, record, index) => <>{index + 1}</>,
    },
    {
      title: '订单编号',
      dataIndex: 'code',
    },
    {
      title: '帖子ID',
      dataIndex: 'relationId',
    },
    {
      title: '发布时间',
      dataIndex: 'createTime',
      render: val => moment(val).format('YYYY/MM/DD hh:mm')
    },
    {
      title: '状态',
      dataIndex: 'status',
      render: val => FORUMTYPE[val]
    },
    {
      title: '订单金额',
      dataIndex: 'price',
      render: val => <>¥{val}</>,
    },
    {
      title: '订单描述',
      dataIndex: 'describe',
      width: 460,
      render: val => <>{val?.length > 200 ? `${val.slice(200)}...` : val || '-'}</>,
    },
    {
      title: '操作',
      width: 160,
      render: (val, record) => record.status === 2 ? <>
        -
        {/* <Button type="primary" size="small" onClick={() => onUpdate(record)}>退款</Button> */}
      </> : '-',
    },
    // {
    //   title: '留言数',
    //   dataIndex: 'sex',
    //   render: (val, record, index) => <>{val == 0 ? '女' : '男'}</>,
    // },
    // {
    //   title: '私聊量',
    //   dataIndex: 'type',
    //   render: (val, record, index) => <>{val == 0 ? '买家' : '卖家'}</>,
    // },
    // {
    //   title: '累计消费',
    //   dataIndex: 'context',
    //   render: val => val || '-'
    // },
    // {
    //   title: '交易成功/退款成功',
    //   dataIndex: 'context1',
    //   render: val => val || '-'
    // },
    // {
    //   title: '好评率',
    //   dataIndex: 'context4',
    //   render: val => val || '-'
    // },
    // {
    //   title: '举报他人数',
    //   dataIndex: 'type',
    //   render: (val, record, index) => <>{val == 0 ? '买家' : '卖家'}</>,
    // },
    // {
    //   title: '被举报数/被封次数',
    //   dataIndex: 'context',
    //   render: val => val || '-'
    // },
  ];

  return (
    <div className='layout-main-conent'>
      <Card>
        <div className='search'>
          <Form form={form} name='advanced_search' className='search-form' onFinish={() => console.log(1)}>
            <Row gutter={24}>
              <Form.Item name='code' label='订单编号'>
                <Input placeholder='请输入' />
              </Form.Item>
              {/* <Form.Item name='cardId' label='帖子ID'>
                <Input placeholder='请输入' />
              </Form.Item> */}
            </Row>
            <div style={{ textAlign: 'right' }}>
              <Space size='small'>
                <Button type='primary' htmlType='submit' onClick={() => {
                    const params = form.getFieldsValue()
                    getList(params)
                  }}>
                  查询
                </Button>
                <Button
                  onClick={() => {
                    form.resetFields();
                    getList()
                  }}
                >
                  重置
                </Button>
              </Space>
            </div>
          </Form>
        </div>
        <Table
          rowKey='id'
          columns={columns}
          dataSource={list}
          loading={loading}
          pagination={{
            ...pagination,
            onChange: (page: number) => {
              getList({curPage: page});
            },
          }}
        />
      </Card>
      <ForumInfoModel getList={ getList } updateData={ updateData } isOpen={isOpen} onClose={ () => setIsOpen(false)}/>
    </div>
  );
}

export default App;
